{"ast":null,"code":"var _jsxFileName = \"/data/messenger.client/src/components/AudioMessage/index.tsx\",\n  _s = $RefreshSig$();\nimport React from 'react';\nimport { convertCurrentTime } from \"../../utils/helpers\";\nimport classNames from \"classnames\";\nimport './AudioMessage.scss';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst AudioMessage = _ref => {\n  _s();\n  let {\n    content,\n    isMe = false,\n    replyStatus = false\n  } = _ref;\n  const [isPlaying, setIsPlaying] = React.useState(false);\n  const audioElem = React.useRef(null);\n  const [progress, setProgress] = React.useState(0);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  React.useEffect(() => {\n    if (audioElem.current) {\n      audioElem.current.addEventListener('playing', () => {\n        setIsPlaying(true);\n      }, false);\n      audioElem.current.addEventListener('ended', () => {\n        setIsPlaying(false);\n        setProgress(0);\n        setCurrentTime(0);\n      }, false);\n      audioElem.current.addEventListener('pause', () => {\n        setIsPlaying(false);\n      }, false);\n      audioElem.current.addEventListener('timeupdate', () => {\n        const duration = audioElem.current && audioElem.current.duration || 0;\n        audioElem.current && setCurrentTime(audioElem.current.currentTime);\n        audioElem.current && setProgress(audioElem.current.currentTime / duration * 100);\n      });\n    }\n  }, [audioElem, content]);\n  const togglePlay = () => {\n    if (!isPlaying && audioElem.current) {\n      audioElem.current.play();\n    } else if (isPlaying && audioElem.current) {\n      audioElem.current.pause();\n    }\n  };\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: classNames('message__audio', {\n      'message__audio--isMe': isMe && !replyStatus\n    }),\n    children: [/*#__PURE__*/_jsxDEV(\"audio\", {\n      ref: audioElem,\n      src: content.link,\n      preload: \"auto\"\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 53,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"message__audio-progress\",\n      style: {\n        width: progress + '%'\n      }\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 54,\n      columnNumber: 13\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"message__audio-info\",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"message__audio-btn\",\n        children: /*#__PURE__*/_jsxDEV(\"button\", {\n          className: classNames({\n            'btn-play': !isPlaying,\n            'btn-pause': isPlaying\n          }),\n          onClick: togglePlay\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 57,\n          columnNumber: 21\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 56,\n        columnNumber: 17\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"message__audio-wave\"\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 62,\n        columnNumber: 17\n      }, this), /*#__PURE__*/_jsxDEV(\"span\", {\n        className: \"message__audio-duration\",\n        children: convertCurrentTime(currentTime)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 63,\n        columnNumber: 17\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 55,\n      columnNumber: 13\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 52,\n    columnNumber: 9\n  }, this);\n};\n_s(AudioMessage, \"d5j+DfTxpVNbVj8128e97BofFfA=\");\n_c = AudioMessage;\nexport default AudioMessage;\nvar _c;\n$RefreshReg$(_c, \"AudioMessage\");","map":{"version":3,"names":["React","convertCurrentTime","classNames","AudioMessage","content","isMe","replyStatus","isPlaying","setIsPlaying","useState","audioElem","useRef","progress","setProgress","currentTime","setCurrentTime","useEffect","current","addEventListener","duration","togglePlay","play","pause","link","width"],"sources":["/data/messenger.client/src/components/AudioMessage/index.tsx"],"sourcesContent":["import React from 'react';\nimport {AudioMessageProps} from \"../../models/props/AudioMessageProps\";\nimport {convertCurrentTime} from \"../../utils/helpers\";\nimport classNames from \"classnames\";\nimport './AudioMessage.scss';\n\nconst AudioMessage: React.FC<AudioMessageProps> = ({content, isMe = false, replyStatus = false}) => {\n    const [isPlaying, setIsPlaying] = React.useState<boolean>(false);\n    const audioElem = React.useRef<HTMLAudioElement>(null);\n    const [progress, setProgress] = React.useState<number>(0);\n    const [currentTime, setCurrentTime] = React.useState<number>(0);\n\n    React.useEffect(() => {\n        if (audioElem.current) {\n            audioElem.current.addEventListener(\n                'playing',\n                () => {\n                    setIsPlaying(true);\n                }, false\n            );\n            audioElem.current.addEventListener(\n                'ended',\n                () => {\n                    setIsPlaying(false);\n                    setProgress(0);\n                    setCurrentTime(0);\n                }, false\n            );\n            audioElem.current.addEventListener(\n                'pause',\n                () => {\n                    setIsPlaying(false);\n                }, false\n            );\n            audioElem.current.addEventListener('timeupdate', () => {\n                const duration = (audioElem.current && audioElem.current.duration) || 0;\n                audioElem.current && setCurrentTime(audioElem.current.currentTime);\n                audioElem.current && setProgress((audioElem.current.currentTime / duration) * 100);\n            });\n        }\n    }, [audioElem, content]);\n\n    const togglePlay = () => {\n        if (!isPlaying && audioElem.current) {\n            audioElem.current.play();\n        } else if (isPlaying && audioElem.current) {\n            audioElem.current.pause();\n        }\n    }\n\n    return (\n        <div className={classNames('message__audio', {'message__audio--isMe': isMe && !replyStatus})}>\n            <audio ref={audioElem} src={content.link} preload='auto'/>\n            <div className=\"message__audio-progress\"  style={{width: progress + '%'}}/>\n            <div className=\"message__audio-info\">\n                <div className=\"message__audio-btn\">\n                    <button className={classNames({\n                        'btn-play': !isPlaying,\n                        'btn-pause': isPlaying\n                    })} onClick={togglePlay} />\n                </div>\n                <div className=\"message__audio-wave\" />\n                <span className=\"message__audio-duration\">{convertCurrentTime(currentTime)}</span>\n            </div>\n        </div>\n    );\n}\n\nexport default AudioMessage;"],"mappings":"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"},"metadata":{},"sourceType":"module"}